<script setup>
import { RouterView, useRoute } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'
import { computed } from 'vue'
const route = useRoute()

const breadcrumbs = computed({
  get() {
    return route.matched.map((route) => ({
      label: route.meta.title || '无标题', //使用meta.title
      to: route.path // 当前路由项无跳转链接
    }))
  }
})

console.log(route,'route')
</script>

<template>
  <div class="bread-crumb" v-if="breadcrumbs">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index" :to="item.to ? { path: item.to } : null">
        {{ item.label }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <RouterView />
</template>

<style scoped lang="scss">
.bread-crumb{
  padding: 12px 20%;
}
</style>
